<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生详细信息</title>
  </head>
  <body>
    <div id="ib-page">
      <!--1、 栏目标题 begin-->
      <div id="ib-stu-title">【前后端分离】学生信息增删改查系统</div>
      <!--2、 搜索模块 begin-->

      <form action="" id="ib-search">
        <div>
          <button type="button">新增学生信息</button>
        </div>
        <div>
          <input type="text" placeholder="请输入姓名或学号" id="ib-key" />
        </div>
        <div>
          <select name="college">
            <option value="宿迁学院">宿迁学院</option>
            <option value="连云港学院">连云港学院</option>
            <option value="徐州医学院">徐州医学院</option>
          </select>
        </div>
        <div>
          <button type="submit">搜索信息</button>
        </div>
      </form>
      <div id="ib-nav"><a href="./index.html">首页</a>->学生详细信息</div>
      <!--3、 学生信息列表 begin-->
      <div id="ib-stu-detail">
        <div class="ib-line">
          <div class="ib-left">姓名</div>
          <div class="ib-right">张三</div>
        </div>
        <div class="ib-line">
          <div class="ib-left">学校</div>
          <div class="ib-right">江苏理工学院</div>
        </div>
        <div class="ib-line">
          <div class="ib-left">专业</div>
          <div class="ib-right">计算机应用技术</div>
        </div>
        <div class="ib-line">
          <div class="ib-left">年龄</div>
          <div class="ib-right">18</div>
        </div>
        <div class="ib-line">
          <div class="ib-left">户籍</div>
          <div class="ib-right">江苏-宿迁</div>
        </div>
      </div>
      <!--4、  分页 begin-->
    </div>
  </body>
</html>
<!-- 引入样式表 -->
<link rel="stylesheet" href="./style/style.css" />
<style type="text/css">
  #ib-stu-detail {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;

    line-height: 40px;
  }
  #ib-stu-detail .ib-line {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
  }
  #ib-stu-detail .ib-left {
    width: 100px;
    text-align: right;
    font-weight: bold;
    width: 15%;
    background-color: yellow;
    padding: 10px;
  }

  #ib-stu-detail .ib-right {
    text-align: left;
    width: 80%;
    background-color: aqua;
    padding: 10px;
  }
</style>
